<template>
    <div class="video_ali">
        <header-footer :commonData="{$parent:$parent}">
            <div class="video video_bg" v-cloak>
                <div class="videoLeft">
                    <div v-if="isVideoOver" class="video_mask">
                    </div>
                    <a v-if="isVideoOver" class="video_mask_img" @click="reloadPage">
                        <img src="/static/img/playOver.png" width="566px" height="176px">
                    </a>
                    <vue-aliplayer-v2 @ready="ready" v-if="!String.isEmptyOrNUll(options.playauth)"
                        id="vue-aliplayer-v2" ref="player" :options="options" @timeupdate="timeupdate1" @ended="ended"
                        @play='playEvent' />
                    <img v-else src="/static/img/skin.jpg" width="100%" height="100%">
                </div>
                <div class="videoRight">
                    <el-collapse accordion v-for="(item,index) in groups" :key="index" v-model="activeName">
                        <el-collapse-item :title="item.groupName" :name="index">
                            <div class="video_list_title" v-for="(list,index1) in item.videos" :key="index1">
                                <a class="videoList" :class="{video_list_active:list.aliId==aliId}"
                                    href="javascript:void(0)" @click="toPlay(list.aliId,list.videoName)">
                                    <div class="videoText">
                                        <p :title="list.videoName">{{list.videoName}}</p>
                                        <span>总时长：{{dateFormat(list.duration)}}</span>
                                    </div>
                                    <div class="progress">
                                        <!-- <p class="videoPercent">{{list.videoActive?'100':'0'}}%</p> -->
                                        <p class="videoImg">
                                            <img src="/static/img/play.gif">
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <div class="clear"></div>
                <div style="display: flex;flex-direction: row;">
                    <div class="col" v-if="!String.isEmptyOrNUll(showercode)" style="text-align: center;">
                        <img :src="showercode" @click="$refs.smallCodeChild.showSmallCode()" title="点击放大微信扫码学习"
                            width="100px" height="100px" style="cursor: pointer;position: relative;top: 20px;">
                        <p style="color: #FFFFFF;margin-top: 20px;">点击放大扫码小程序学习</p>
                    </div>
                    <h3 class="video_title" style="margin-top: 50px;line-height: 36px;">{{courseName}}
                    </h3>
                </div>
            </div>
        </header-footer>
        <smallCode ref="smallCodeChild"></smallCode>
    </div>
</template>

<script>
    var _this;
    import headerFooter from '@/components/cont_education/header_and_footer.vue'
    import smallCode from '@/components/smallCode.vue'
    export default {
        name: 'video_ali',
        data: function() {
            return {
                activeName: 0,
                aliId: "",
                playauth: "",
                groups: [],
                courseName: "",
                saveVideoData: {
                    courseId: 0,
                    groupCode: ""
                },
                isVideoOver: false,
                ext: {},
                showercode: "",
                isready: false,
                options: { //配置项
                    height: '100%',
                    width: '100%',
                    useH5Prism: true,
                    vid: "",
                    playauth: "",
                    autoplay: true
                },
                studyTaskUserId:""
            }
        },
        beforeCreate: function() {
            _this = this;
        },
        mounted: function() {
            this.saveVideoData.courseId = this.$route.params.courseId;
            this.saveVideoData.groupCode = this.$route.params.groupCode;
            this.studyTaskUserId = this.$route.params.studyTaskUserId;

            if (!this.common.isChrome() && !this.common.isFirefox()) {
                this.common.toPage("/broswerPage");
                return;
            }
            this.common.postNotLoading(this.api.getQRCode, {}, function(res) {
                if (!String.isEmptyOrNUll(res.resultMap)) {
                    _this.showercode = res.resultMap;
                }
            });
            // this.$refs.smallCodeChild.showSmallCodeDialog();
            this.getDetail();
            this.addRecord();
        },
        methods: {
            addRecord:function(){
                this.common.post(this.api.addRecord, {
                    recordNo: this.saveVideoData.groupCode,
                    studyTaskUserId: this.studyTaskUserId
                }, function(res) {});
            },
            ready: function() {
                if (this.seek != undefined) {
                    var player = this.$refs.player;
                    player.seek(0);
                    player.pause();
                    this.isready = true;
                }
            },
            toPlay(aliId,courseName) {
                this.courseName=courseName;
                this.aliId = aliId;
                this.common.post(this.api.getPlayAuth, {
                    aliId: aliId
                }, function(res) {
                    _this.replayByVidAndPlayAuth(aliId, res.resultMap, 0);
                });
            },
            replayByVidAndPlayAuth: function(vid, playauth, playTime) {
                this.options.vid = vid;
                this.options.playauth = playauth;
                this.seek = playTime;
                var player = this.$refs.player;
                if (player) {
                    player.replayByVidAndPlayAuth(vid, playauth);
                }
            },
            dateFormat: function(total) {
                var hour = Math.floor(total / 60 / 60);
                var minutes = Math.floor(total / 60 % 60);
                var seconds = Math.floor(total % 60);
                hour = hour < 10 ? '0' + hour : hour;
                minutes = minutes < 10 ? '0' + minutes : minutes;
                seconds = seconds < 10 ? '0' + seconds : seconds;
                return hour + ":" + minutes + ":" + seconds;
            },
            getDetail: function() {
                this.common.post(this.api.getDetail, {
                    courseId: this.saveVideoData.courseId,
                    groupCode: this.saveVideoData.groupCode
                }, function(res) {
                    _this.groups = res.resultMap.groups;
                    _this.playStartTime = res.ext.watchTime;
                    _this.playauth = res.ext.tagExt;
                    _this.ext = res.ext;
                    var group = res.resultMap.groups;
                    for (var i = 0; i < group.length; i++) {
                        var current = group[i].videos;
                        for (var j = 0; j < current.length; j++) {
                            current[j].videoActive = true;
                            if (current[j].id == _this.ext.videoId) {
                                _this.aliId = current[j].aliId;
                                _this.courseName = current[j].videoName;
                                _this.activeName = group.indexOf(group[i], "courseId");
                                _this.replayByVidAndPlayAuth(_this.aliId, _this.playauth, 0);
                                return;
                            }
                        }
                    }
                });
            },
            timeupdate1: function(time) {},
            ended: function(e) {
                _this.$message.success("当前视频播放结束，点击播放下一个！");
            },
            playEvent: function() {
                console.log('开始播放');
            }
        },
        components: {
            headerFooter: headerFooter,
            smallCode: smallCode
        }
    }
</script>

<style>

</style>
